<template>
	<view class="calculator-view">
		<view class="calculator-view-top">
			<text class="calculator-view-top-a" v-if="topText||bottomText">{{ topText}}{{ bottomText }}</text>
			<text class="calculator-view-top-a" v-else>0</text>
		</view>
	<!-- 	<view class="remarkbox row">
			<input style="float: left;width: 85%;height:100rpx" type="text" v-model="remark" placeholder="点击写备注" />
			<view style="float: left;width: 15%;height:100rpx;overflow: hidden;border-radius: 10rpx;">
			
					<tn-image-upload style="float: right;" imageMode="aspectFill" uploadText="" :width="100" :height="100"  ref="imageUpload" :action="action" :formData="formData" :fileList="fileList"
						:disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
						:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
						:customBtn="customBtn" :beforeUpload="beforeUpload" @on-list-change="listChange"
						@on-oversize="oversize" @on-exceed="exceed" @on-choose-complete="chooseComplete"
						@on-choose-fail="chooseFail" @on-uploaded="uploaded" @on-success="uploadSuccess"
						@on-change="uploadChange" @on-progress="uploadProgress" @on-error="uploadError"
						@on-remove="fileRemove" class="css-theme" :class="[cueTheme]">
						<view v-if="!showUploadList" slot="file" style="width: 100%;">
							<view v-for="(item,index) in lists" :key="index" class="tn-image-upload__item">
								<image class="tn-image-upload__item__image" :src="item.url || item.path"
									mode="aspectFill"></image>
									
							</view>
						</view>
				
						<view v-if="customBtn" slot="addBtn" class="tn-image-upload__custom-btn"
							hover-class="tn-hover-class" hover-stay-time="150">
							<image style="width: 100rpx;height:100rpx;" src="/static/new/bill/photo.png"></image>
						</view>
					</tn-image-upload>
				
				</view>
		</view> -->
		<view class="calculator-button">
			<view class="calculator-button-left">
				<!-- 1-9 -->
				<!-- 小程序使用请改成 :key="ix" -->
				<view class="calculator-button-left-aview center"  hover-class="hover-gray" v-for="(item, ix) in calculatorButAList" :key="item">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="numTapA(item)">
						<text class="calculator-button-left-a1">{{ item }}</text>
					</view>
				</view>
				<!-- 小数点 -->
				<!-- <view class="calculator-button-left-aview center" hover-class="hover-gray">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="numTapC"><text class="calculator-button-left-a1">.</text></view>
				</view> -->
				<!-- 0 00 -->
				<!-- 小程序使用请改成 :key="ix" -->
				<view class="calculator-button-left-aview center" hover-class="hover-gray"  v-for="(item, ix) in calculatorButBList" :key="item">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="numTapB(item)">
						<text class="calculator-button-left-a1">{{ item }}</text>
					</view>
				</view>
				<view class="calculator-button-left-aview center" hover-class="hover-gray">
					<view class="calculator-button-left-a2"></view>
					<view class="calculator-button-left-a" @tap="deleteNum">
						<image  class="calculator-view-top-b2" style="width: 50rpx;height: 50rpx;" src=""></image>
					</view>
				</view>
				
			</view>
			<!-- 运算符号 -->
			<view class="calculator-button-right">
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="calculator-button-right-a" style="margin-top: 5rpx;" hover-class="hover-gray">
					<text class="mix-icon icon-24gl-calendar" v-if="!datetime"></text>
					<text class="calculator-button-right-a1 datetimebtn">{{ datetime||'今天' }}</text>
				</view>
				</picker>
				<!-- 小程序使用请改成 :key="ix" -->
			<!-- 	<view class="calculator-button-right-a" hover-class="hover-gray" v-for="(item, ix) in calculatorButDList" :key="item" @tap="operationalTapB(item)">
					<text class="calculator-button-right-a1">{{ item }}</text>
				</view> -->
				<!-- = -->
				<view class="calculator-button-right-a" hover-class="hover-gray"  @tap="clearAll()">
						<text class="calculator-button-right-a1">AC</text>
					</view> 
				<view style="background-color: #FEDBE4;height: 190rpx;" class="calculator-button-right-a equalbtn" hover-class="hover-opacity" @tap="operationalTapC">
					<text style="color:#AB7559;" class="calculator-button-right-a1">{{equal?'=':'完成'}}</text></view>
			</view>
		</view>
		<!-- 按钮 -->
	<!-- 	<view class="calculator-view-bottom">
			<view class="calculator-view-bottom-a" @tap="closeCalculatorPopup"><text class="calculator-view-bottom-a1">关闭</text></view>
			<view class="calculator-view-bottom-a" @tap="clearAll"><text class="calculator-view-bottom-a1">清零</text></view>
		</view> -->
		<!-- 选择日期 -->
		
		
			
	</view>
</template>

<script>
export default {
	props: {
		// 开启动画
		dataList: {
			type: Object,
			default: {}
		},
	},
	data() {
		return {
			datetime:'',
			equal:false,
			calculatorButAList: ['7', '8', '9', '4', '5', '6', '1', '2', '3'],
			calculatorButBList: ['0','00'],
			calculatorButCList: ['÷', '×'],
			calculatorButDList: ['+', '-'],
			topText: '',
			bottomText:'',
			remark:'',
			
			//下面是图片上传
			action: getApp().globalData.url + '/common/upload',
			urls: '',
			formData: {
				apiType: 'this,ali',
				token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
				image: null
			},
			
			fileList: [],
			showUploadList: true,
			customBtn: true,
			autoUpload: true,
			showProgress: false,
			deleteable: true,
			customStyle: false,
			maxCount: 1,
			disabled: false,
			lists: [],
			sectionList: [{
				name: '参数切换',
				section: [
			
				]
			}],
			fullWindowsScroll: false,
			//图片上传结束
		};
	},
	 computed: {
	        startDate() {
	            return this.getDate('start');
	        },
	        endDate() {
	            return this.getDate('end');
	        }
		
	    },
		watch:{
			// dataList(newval) {
			// 	console.log("========1=======")
			// 	console.log(newval)
			// 	if(JSON.stringify(newval) != "{}"){
					
			// 		this.bottomText = newval.amount
			// 		this.remark =newval.remark
			// 		this.datetime = newval.time
			// 		this.fileList = [{
			// 			url: this.globalUrl + newval.images
			// 		}]

			// 	}
			// }
		},
		mounted() {
			console.log("=====2==========")
				console.log(this.dataList)
				if(JSON.stringify(this.dataList) != "{}"){
					
					this.bottomText = this.dataList.amount
					this.remark =this.dataList.remark
					this.datetime = this.dataList.time
					if(this.dataList.images!=null&&this.dataList.images!=''){
						this.fileList = [{
							url: getApp().globalData.url + this.dataList.images
						}]
						this.urls = this.dataList.images
					}
					
				
				}
		},
	methods: {
		
		
		// 文件上传前执行
		beforeUpload(index, lists) {
			console.log('文件上传前执行', lists, index);
			console.log(this.formData);
			this.formData.image = lists[index].file
			return true
		},
		
		
		listChange(lists, index) {
			console.log('上传文件列表发生改变', lists, index);
			this.lists.splice(0, this.lists.length)
			this.$nextTick(() => {
				this.lists = this.$tn.deepClone(lists)
				if (this.customStyle && lists.length > 4) {
					this.fullWindowsScroll = true
				} else {
					// this.$refs.demoTemplate.updateSectionScrollView()
				}
			})
		},
		oversize(val, lists, index) {
			// console.log('上传的文件超过大小', val, lists, index);
		},
		exceed(val, lists, index) {
			// console.log('上传的文件超过允许数量', val, lists, index);
		},
		chooseComplete(lists, index) {
			// console.log('文件选择成功', lists, index);
		},
		chooseFail(err) {
			// console.log('文件选择失败', err);
		},
		uploaded(lists, index) {
			console.log('全部上传文件处理完成', lists, index);
			var urls = "";
			for (var i = 0; i < lists.length; i++) {
				if (i == 0) {
					urls += lists[i].response.fileName
				} else {
					urls += "," + lists[i].response.fileName
				}
			}
			this.urls = urls
			console.log(urls)
		},
		uploadSuccess(data, currentIndex, lists, index) {
			// console.log('文件上传成功', data, currentIndex, lists, index);
		},
		uploadChange(res, currentIndex, lists, index) {
			// console.log('文件上传信息有变', res, currentIndex, lists, index);
		},
		uploadProgress(res, currentIndex, lists, index) {
			// console.log('文件上传进度', res, currentIndex, lists, index);
		},
		uploadError(err, currentIndex, lists, index) {
			// console.log('文件上传失败', err, currentIndex, lists, index);
		},
		fileRemove(currentIndex, lists, index) {
			// console.log('文件移除成功', currentIndex, lists, index);
		},
		 bindDateChange: function(e) {
		            this.datetime = e.detail.value.replace(/-/g,'/')
		        },
		 getDate(type) {
		            const date = new Date();
		            let year = date.getFullYear();
		            let month = date.getMonth() + 1;
		            let day = date.getDate();
		
		            if (type === 'start') {
		                year = year - 60;
		            } else if (type === 'end') {
		                year = year + 2;
		            }
		            month = month > 9 ? month : '0' + month;
		            day = day > 9 ? day : '0' + day;
		            return `${year}-${month}-${day}`;
		 },
		closeCalculatorPopup() {
			this.$emit('closeCalculatorPopup');
		},
		// 清零
		clearAll() {
			this.bottomText = '';
			this.topText = '';
			this.remark=''
			this.datetime=''
		},
		
		// 删除一位字符
		deleteNum() {
			if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
				this.bottomText = '';
				return;
			}
			if (this.bottomText) {
				this.bottomText = this.bottomText.slice(0, -1);
				// if(!this.bottomText){
				// 	this.topText = '';
				// }
				return;
			}

			if (this.topText) {
				let temp = this.topText.split(' ');
				temp.pop();
				this.topText = temp.join(' ');
				// this.topText = this.topText.slice(0, -1);
				// this.topText = '';
			}
		},
		// 1-9输入判断
		numTapA(item) {
			if (this.bottomText.length == 1 && this.bottomText == 0) {
				return;
			}
			if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
				this.bottomText = '';
			}
			this.bottomText += item;
		},
		// 0,00输入判断
		numTapB(item) {
			if (this.bottomText.length == 1 && this.bottomText == 0) {
				return;
			}
			if (item == '00' && this.bottomText == '') {
				return;
			}
			if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
				this.bottomText = '';
			}
			this.bottomText += item;
		},
		// .输入判断
		numTapC() {
			if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
				this.bottomText = '';
			}
			if (!this.bottomText) {
				return;
			}
			if (this.bottomText.indexOf('.') != '-1') {
				return;
			}
			this.bottomText += '.';
		},
		
		// + - 输入
		operationalTapB(item) {
			if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
				this.bottomText = '';
				return;
			}
			this.equal=true
			if (this.bottomText) {
				if (this.bottomText.endsWith('.')) {
					return;
				}
				if (this.bottomText.endsWith('-')) {
					return;
				}
				if (this.topText) {
					if (this.topText.endsWith('=')) {
						this.topText = this.bottomText + ' ' + item;
						this.bottomText = '';
						return;
					}
					let numList = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0'];
					let lastT = this.topText.slice(-1);
					if (numList.includes(lastT)) {
						this.topText = this.topText + this.bottomText + ' ' + item;
					} else {
						this.topText = this.topText + ' ' + this.bottomText + ' ' + item;
					}
				} else {
					this.topText = this.bottomText + ' ' + item;
				}
				this.bottomText = '';
				return;
			}
			// 首位字符允许为-
			if (item == '-') {
				this.bottomText = item;
				return;
			}
		},
		// = 输入
		operationalTapC() {
			if (this.bottomText == 'Infinity' || this.bottomText == 'NaN') {
				this.bottomText = '';
			}
			
			if(!this.equal){
				
				this.$emit('closeCalculatorPopup',{val:this.bottomText,remark:this.remark,time:this.datetime,urls:this.urls})
				setTimeout(()=>{
					this.clearAll()
				},500)
				
			}
			if (this.bottomText) {
				if (this.bottomText.endsWith('.')) {
					return;
				}
				if (this.bottomText.endsWith('-')) {
					return;
				}
				if (this.topText.endsWith('=')) {
					this.topText = this.bottomText;
					this.bottomText = '';
					return;
				}

				let tempA = this.topText + ' ' + this.bottomText;
				this.topText = this.topText + ' ' + this.bottomText + ' ' + '=';

				// 求值
				this.operationHandle(tempA);
				this.equal=false
				return;
			}
			if (this.topText) {
				let tempA = '';
				let lastT = this.topText.slice(-1);
				if (lastT == '+' || lastT == '-' || lastT == '÷' || lastT == '×' || lastT == '=') {
					tempA = this.topText.slice(0, -2);
				} else if (lastT == ' ') {
					tempA = this.topText.slice(0, -1);
					let t1 = tempA.slice(-1);
					let t2 = ['+', '-', '×', '÷'];
					if (t2.includes(t1)) {
						tempA = tempA.slice(0, -1);
					}
					this.topText = this.topText + ' ' + '=';
				} else {
					tempA = this.topText;
					this.topText = this.topText + ' ' + '=';
				}

				// 运算求值
				this.operationHandle(tempA);
			}
		},
		// 运算代理
		operationHandle(resStr) {
			let regA = /×/gi;
			let regB = /÷/gi;
			let expression = resStr.replace(regA, '*');
			expression = expression.replace(regB, '/');

			// #ifdef MP-WEIXIN
			// 小程序禁用 eval(),故自行计算结果
			// 将表达式转成数组
			let expressionList = expression.split(' ');
			// 自定义实现 * / 运算
			for (let i = 1; i < expressionList.length; i += 2) {
				let symbol = expressionList[i];
				let left = expressionList[i - 1];
				let right = expressionList[i + 1];
				if (symbol == '*') {
					expressionList[i - 1] = -1;
					expressionList[i] = -1;
					expressionList[i + 1] = left * right;
				}
				if (symbol == '/') {
					expressionList[i - 1] = -1;
					expressionList[i] = -1;
					expressionList[i + 1] = left / right;
				}
			}
			// 去除标空数据 -1
			expressionList = expressionList.filter(item => item != -1);

			// 自定义实现 + - 运算
			for (let i = 1; i < expressionList.length; i += 2) {
				let symbol = expressionList[i];
				let left = expressionList[i - 1];
				let right = expressionList[i + 1];
				if (symbol == '+') {
					expressionList[i - 1] = -1;
					expressionList[i] = -1;
					expressionList[i + 1] = left * 1 + right * 1;
				}
				if (symbol == '-') {
					expressionList[i - 1] = -1;
					expressionList[i] = -1;
					expressionList[i + 1] = left - right;
				}
			}
			expressionList = expressionList.filter(item => item != -1);
			expressionList = expressionList.filter(item => item);
			// 结果
			let res = expressionList[0];

			if (this.isFloat(res)) {
				res = parseFloat(res.toPrecision(12));
			}
			this.topText =''
			this.bottomText = res + '';
			return;
			// #endif

			// 结果数值 非小程序
			let resNum = eval(expression);
			if (this.isFloat(resNum)) {
				resNum = parseFloat(resNum.toPrecision(12));
			}
			this.topText =''
			this.bottomText = resNum + '';
		},
		// 判断是否浮点数
		isFloat(n) {
			return n != parseInt(n);
		}
	}
};
</script>

<style scoped lang="scss">
	.mix-icon{
		// background-color: $keep-color;
		color: #ffffff;
	}
.calculator-view {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	background-color: #FEEBF0;
	// padding-bottom: 100rpx;
	box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .1);
	border-top: 2px solid #FABBCA;
}
.calculator-view-top {
	box-sizing: border-box;
	width: 750rpx;
	background-color: #FEEBF0;
	padding-top: 20rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	// flex-direction: column;
}
.calculator-view-top-a {
	font-size: 32px;
	min-height: 44rpx;
	color: #212121;
	text-align: right;
}
.calculator-view-top-b {
	margin-top: 20rpx;
	width: 750rpx;
	min-height: 80rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.calculator-view-top-b1 {
	width: 480rpx;
	/* white-space: pre-wrap; */
	word-wrap: break-word;
	font-size: 56rpx;
	text-align: left;
	color: #606060;
}
.calculator-view-top-b2 {
	width: 80rpx;
	height: 80rpx;
}
.calculator-button {
	width: 750rpx;
	display: flex;
	flex-direction: row;
	padding-bottom: 20rpx;
}
.calculator-button-left {
	width: 579rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.calculator-button-left-a {
	position: relative;
	width: 160rpx;
	height: 90rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	
	
	background-color: #ffffff;
	border-radius: 10px;
	border:4rpx solid #FABBCA;
	text-align: center;
	margin-left: 10rpx;
	margin-top:5rpx;
}
.calculator-button-left-aview {
	width: 193rpx;
	height: 100rpx;
	position: relative;
	// border-right: 1px solid #f1f4f4;
	// border-top: 1px solid #f1f4f4;
	box-sizing: border-box;
	overflow: hidden;
	&:nth-child(n + 10) {
		// border-bottom: 1px solid #f1f4f4;
		box-sizing: border-box;
	}
}

.calculator-button-left-a1 {
	font-size: 45rpx;
	color: #212121;
}
.calculator-button-left-a:active {
	opacity: 0.7;
}

.calculator-button-left-a2 {
	width: 170rpx;
	height: 100rpx;
	position: absolute;
}
.calculator-button-right {
	width: 120rpx;
	display: flex;
	flex-direction: column;
}
.calculator-button-right-a {
	position: relative;
	width: 160rpx;
	height: 90rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	// border-right: 1px solid #f1f4f4;
	// border-top: 1px solid #f1f4f4;

	
	
	background-color: #ffffff;
	border-radius: 10px;
	border:4rpx solid #FABBCA;
	text-align: center;
	margin-left: 5rpx;
	margin-top:10rpx;
	
	&:nth-child(n + 4) {
		// border-bottom: 1px solid #f1f4f4;
		box-sizing: border-box;
	}
}
.calculator-button-right-a1 {
	font-size: 50rpx;
	color: #212121;
}
.datetimebtn{
	font-size: 28rpx;
	margin-left: 5rpx;
}
.calculator-button-right-a:active {
	opacity: 0.7;
}
.equalbtn{
	// background-color: $keep-color;
	text{
		font-size: 40rpx;
	}
}
.calculator-view-bottom {
	width: 750rpx;
	height: 110rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.calculator-view-bottom-a {
	width: 160rpx;
	height: 70rpx;
	border-radius: 40rpx;
	margin-left: 50rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
}
.calculator-view-bottom-a:active {
	opacity: 0.7;
}
.calculator-view-bottom-a1 {
	font-size: 34rpx;
	font-weight: 500;
	color: #212121;
}

.remarkbox{
	width: 710rpx;
	margin: 10rpx auto;
	height: 100rpx;
	// line-height: 80rpx;
	background-color: #f1f4f4;
	border-radius: 10rpx;
	justify-content: center;
	padding-left: 20rpx;
	display: flex;
	.labelremark{
		margin: 0 10rpx;
		font-size: 30rpx;
	}
}
</style>
